<script setup lang="ts">
import { ref } from 'vue';
const props = defineProps({
  msg:{
    type:String,
    default:''
  },
  msgType:{
    type:String,
    default:'default'
  }
})
</script>

<template>
  <Teleport to="body">
    <div class="mask"
      w:w="screen"
      w:h="screen"
      w:pos="fixed top-0 left-0"
      w:flex="~ row nowrap"
      w:align="items-center"
      w:justify="center"
      w:text="xl"
    >
      <div class="wrapper" :class="['bg-'+msgType]"
        w:p="x-4 y-2"
        w:border="rounded-md"
      >{{props.msg}}</div>
    </div>
  </Teleport>
</template>

<style lang="scss" scoped>
.bg-default{
  background-color: #585858;
  color: #fff;
}
.bg-success{
  background-color: #dbf1e1;
  color: #19be6b;
}
.bg-warning{
  background-color: #fdf6ec;
  color: #ff9900;
}
.bg-error{
  background-color: #fef0f0;
  color: #fa3534;
}
.bg-info{
  background-color: #f4f4f5;
  color: #909399;
}
</style>